<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>对战控制</title>
    <link rel="stylesheet" th:href="@{../static/layui/css/layui.css}" href="/static/layui/css/layui.css" media="all">
</head>

<body>

<form class="layui-form" action="">

    <div class="layui-form-item">
        <label class="layui-form-label">比赛名称</label>
        <div class="layui-input-block">
            <select name="mName" id="zero" lay-verify="required" lay-filter="mPlayer">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">比赛场次</label>
        <div class="layui-input-block">
            <select name="roundNum" id="first" lay-verify="required" lay-filter="aPlayer">
                <option value=""></option>
            </select>
        </div>
    </div>
</form>

<div class="weadmin-block">
    <!--    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i-->
    <!--            class="layui-icon layui-icon-delete"></i>批量删除-->
    <!--    </button>-->
    <a  onclick="add()" class="layui-btn"><i class="layui-icon layui-icon-add-circle-fine"></i>添加对战</a>
    <a  onclick="selectGame()" class="layui-btn"><i class="layui-icon layui-icon-add-circle-fine"></i>搜索

    </a>
</div>


<table class="layui-table" id="test" lay-filter="message"></table>

<script th:src="@{../static/layui/layui.js}"></script>
<script th:src="@{../static/js/eleDel.js}" type="text/javascript"></script>
<script th:src="@{../static/mysource/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{../static/js/add.js}" type="text/javascript"></script>

<script type="text/html" id="btn">
    <!--按钮-->
    <!--    <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</button>-->
    <button class="layui-btn layui-btn-xs" lay-event="start">编辑</button>
<!--    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="end">关闭</button>-->
</script>


<script type="text/javascript">

    var gid = null;
    layui.use(['table' ,'layer','form'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;

        //获取比赛名称
        $.ajax({
            url: '/game/gameInfo',
            dataType: 'json',
            type: 'get',
            success: function (data) {
                console.log(data);//下面会提到这个data是什么值
                //使用循环遍历，给下拉列表赋值
                $.each(data.data, function (index, value) {
                    // console.log(value.department_id);
                    $('#zero').append(new Option(value.mname,value.match_id));// 下拉菜单里添加元素
                });
                layui.form.render("select");//重新渲染 固定写法

            }
        })

        form.on('select(mPlayer)', function (data) {        //对应lay-filter
            gid = data.value;//获取value值
            console.log(gid);
            $.ajax({
                url: '/match/maxRoundNum/'+gid,
                dataType: 'json',
                type: 'get',
                success: function (data) {
                    console.log(data.user);
                    var lenth = data.user//下面会提到这个data是什么值
                    //使用循环遍历，给下拉列表赋值
                    $('#first').empty();

                    for(var i = 1;i<=lenth;i++){
                        var num = i
                        $('#first').append("<option value=" +i + ">" + i + "</option>");
                    }
                    $('#first').val('');
                    layui.form.render("select");//重新渲染 固定写法
                }
            })
            return false;
        });





















        //第一个实例

        table.render({
            elem: '#test'
            // , height: 500
            , skin: 'line' //表格风格
            , url: '/match/data' //数据接口
            , page: true //开启分页
            , even: true
            // , id: 'table'
            , toolbar: '#toolbarDemo'//开启自定义工具行，指向自定义工具栏模板选择器
            , defaultToolbar: ['filter', 'print', 'exports']
            , cols: [
                [ //表头
                    {field: 'mid', title: '比赛ID' , align: 'center', width: 80}
                    , {field: 'mname', title: '大赛名称', align: 'center'}
                    , {field: 'matchname', title: '场次别名', align: 'center'}
                    , {field: 'a_name', title: '选手1', align: 'center'}
                    , {field: 'a_song', title: '选手1歌曲', align: 'center'}
                    , {field: 'b_name', title: '选手2', align: 'center'}
                    , {field: 'b_song', title: '选手2歌曲', align: 'center'}
                    , {field: 'm_status', title: '比赛状态', align: 'center'}
                    , {field: 'button', title: '操作', width: 200, toolbar: "#btn",align: 'center'}
                ]
            ]
            , limits: [3, 5, 10, 20]
            , limit: 10
            , parseData: function (res) {
                var result;
                // console.log(this);
                // console.log(JSON.stringify(res));
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {"code": res.code, "msg": res.msg, "count": res.count, "data": result};
            }
            ,done: function (res){
                $("[data-field='m_status']").children().each(function(){
                    if($(this).text()=='1'){
                        $(this).text("进行中")
                    }else if($(this).text()=='0'){
                        $(this).text("未开始")
                    }else if($(this).text()=='2'){
                            $(this).text("已结束")
                    }else if($(this).text()=='3'){
                        $(this).text("已暂停")
                    }
                })
            }
        });




        //触发事件
        table.on('tool(message)', function (obj) {
            var data1 = obj.data; //获得当前行数据
            console.log(data1)
            switch (obj.event) {
                case 'start':
                    var url = "/match/start";
                    var mid =data1.mid;
                    var mStatus = data1.m_status;
                    var playerA = data1.player_a;
                    var playerB = data1.player_b;

                    // ss(url,mid,mStatus,playerA,playerB)
                    updateMatches(data1)
                    break;
                case 'end':
                    var url = "/match/end";
                    var mid =data1.mid;
                    ss(url,mid);
                    // layer.msg('关闭', {icon: 6, anim: 6});
                    break;
            }
            ;
        });
        function updateMatches(data1) {
            console.log(data1)
            console.log(data1.mid)
            let mid = data1.mid;
            layer.open({
                type: 2,
                area: ['600px', '450px'],
                shadeClose: true,
                shade: 0.4,
                title: "编辑对战",
                btn: ['关闭'],
                moveType: 1, //拖拽模式，0或者1
                content: "/match/edit/"+mid,
                success: function (layero) {
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                        href: '/match/control'
                    });
                }
            })

        }


        function ss(url,mid,mStatus,playerA,playerB){


            $.ajax({
                url: url ,
                dataType:"json",
                type:"post",
                data: { "mid":mid,"mStatus":mStatus,"playerA":playerA,"playerB":playerB },
                success:function (data){
                    var b = data.user.status;
                        if (b==0){
                            alert(data.msg)
                            // location.reload()
                        }else if(b==1){
                            alert(data.msg)
                            // layer.msg(data.msg, {icon: 6, anim: 6});
                            location.reload()
                        }else if(b==2){
                            alert(data.msg)
                        }



                }
            })

        }

    });
    layui.use(['table' ,'layer','form'], function () { //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
        var table = layui.table
        add = function (url, id) {
            layer.open({
                type: 2,
                area: ['800px', '600px'],
                shadeClose: true,
                shade: 0.4,
                title: "添加对战场次",
                btn: ['关闭'],
                moveType: 1, //拖拽模式，0或者1
                content: '/match/addMatches',
                success: function (layero) {
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                        href: '/match/control'
                    });
                }
            })

        }

        selectGame = function (data) {
            var  roundNum = $("[name='roundNum']").val();
            table.render({
                elem: '#test'
                // , height: 500
                , skin: 'line' //表格风格
                , url: '/match/data?gid='+gid+'&roundNum='+roundNum //数据接口
                , page: true //开启分页
                , even: true
                // , id: 'table'
                , toolbar: '#toolbarDemo'//开启自定义工具行，指向自定义工具栏模板选择器
                , defaultToolbar: ['filter', 'print', 'exports']
                , cols: [
                    [ //表头
                        {field: 'mid', title: '比赛ID' , align: 'center', width: 80}
                        , {field: 'mname', title: '大赛名称', align: 'center'}
                        , {field: 'matchname', title: '场次别名', align: 'center'}
                        , {field: 'a_name', title: '选手1', align: 'center'}
                        , {field: 'a_song', title: '选手1歌曲', align: 'center'}
                        , {field: 'b_name', title: '选手2', align: 'center'}
                        , {field: 'b_song', title: '选手2歌曲', align: 'center'}
                        , {field: 'm_status', title: '比赛状态', align: 'center'}
                        , {field: 'button', title: '操作', width: 200, toolbar: "#btn",align: 'center'}
                    ]
                ]
                , limits: [3, 5, 10, 20]
                , limit: 10
                , parseData: function (res) {
                    var result;
                    // console.log(this);
                    // console.log(JSON.stringify(res));
                    if (this.page.curr) {
                        result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                    } else {
                        result = res.data.slice(0, this.limit);
                    }
                    return {"code": res.code, "msg": res.msg, "count": res.count, "data": result};
                }
                ,done: function (res){
                    $("[data-field='m_status']").children().each(function(){
                        if($(this).text()=='1'){
                            $(this).text("进行中")
                        }else if($(this).text()=='0'){
                            $(this).text("未开始")
                        }else if($(this).text()=='2'){
                            $(this).text("已结束")
                        }
                    })
                }
            });
        }
    })



</script>


</body>

</html>